{% extends 'myhome/index.html'%}
{% block title %}
<title>我的购物车</title>
{% endblock %}

{% block css %}
<link href="/static/myhome/css/cartstyle.css" rel="stylesheet" type="text/css" />
<link href="/static/myhome/css/optstyle.css" rel="stylesheet" type="text/css" />
{% endblock %}

{% block con %}
<!--购物车 -->
<div class="concent">
    <div id="cartTable">
        <div class="cart-table-th">
            <div class="wp">
                <div class="th th-chk">
                    <div id="J_SelectAll1" class="select-all J_SelectAll">
                    </div>
                </div>
                <div class="th th-item">
                    <div class="td-inner">
                        商品信息
                    </div>
                </div>
                <div class="th th-price">
                    <div class="td-inner">
                        单价
                    </div>
                </div>
                <div class="th th-amount">
                    <div class="td-inner">
                        数量
                    </div>
                </div>
                <div class="th th-sum">
                    <div class="td-inner">
                        金额
                    </div>
                </div>
                <div class="th th-op">
                    <div class="td-inner">
                        操作
                    </div>
                </div>
            </div>
        </div>
        <div class="clear">
        </div>
        <tr class="item-list">
            <div class="bundle  bundle-last ">

                <div class="clear">
                </div>
                <div class="bundle-main">
                    {% for v in data %}
                    <ul class="item-content clearfix">
                        <li class="td td-chk">
                            <div class="cart-checkbox ">
                                <input class="check"  name="items[]" value="{{ v.id }}"
                                type="checkbox">
                               
                            </div>
                        </li>
                        <li class="td td-item">
                            <div class="item-pic">
                                <a href="#" target="_blank" data-title="{{ v.goodsid.title }}"
                                class="J_MakePoint" data-point="tbcart.8.12">
                                    <img src="{{ v.goodsid.pic_url }}" class="itempic J_ItemImg" style="width: 100%">
                                </a>
                            </div>
                            <div class="item-info">
                                <div class="item-basic-info">
                                    <a href="#" target="_blank" title="{{ v.goodsid.title }}" class="item-title J_MakePoint"
                                    data-point="tbcart.8.11">
                                        {{ v.goodsid.title }}
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="td td-info">
                            <div class="item-props">

                            </div>
                        </li>

                        <li class="td td-price">
                            <div class="item-price price-promo-promo">
                                <div class="price-content">

                                    <div class="price-line">
                                        <em class="J_Price price-now" tabindex="0">
                                            {{ v.goodsid.price }}
                                        </em>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="td td-amount">
                            <div class="amount-wrapper ">
                                <div class="item-amount ">
                                    <div class="sl">
                                        <input class="min am-btn" name="" type="button" value="-" />
                                        <input class="text_box cartnum" cartid="{{ v.id }}" name="" type="text" value="{{ v.num }}" style="width:30px;"/>
                                        <input class="add am-btn" name="" type="button" value="+" />
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="td td-sum">
                            <div class="td-inner">
                                <em tabindex="0" class="J_ItemSum number">
                                    {% load pagetag %}
                                    {% cartxj v.num v.goodsid.price %}
                                </em>
                            </div>
                        </li>
                        <li class="td td-op">
                            <div class="td-inner">
                                <a title="移入收藏夹" class="btn-fav" href="#">
                                    移入收藏夹
                                </a>
                                <a href="javascript:;" data-point-url="#" class="delete">
                                    删除
                                </a>
                            </div>
                        </li>
                    </ul>
                    {% endfor %}
                </div>
            </div>
        </tr>

    </div>
    <div class="clear">
    </div>
    <div class="float-bar-wrapper">
        <div id="J_SelectAll2" class="select-all J_SelectAll">
            <div class="cart-checkbox">
                <input class="check-all check" id="J_SelectAllCbx2" name="select-all"
                value="true" type="checkbox">
                <label for="J_SelectAllCbx2">
                </label>
            </div>
            <span>
                全选
            </span>
        </div>
        <div class="operations">
            <a href="#" hidefocus="true" class="deleteAll">
                删除
            </a>
            <a href="#" hidefocus="true" class="J_BatchFav">
                移入收藏夹
            </a>
        </div>
        <div class="float-bar-right">
            <div class="amount-sum">
                <span class="txt">
                    已选商品
                </span>
                <em id="J_SelectedItemsCount">
                    0
                </em>
                <span class="txt">
                    件
                </span>
                <div class="arrow-box">
                    <span class="selected-items-arrow">
                    </span>
                    <span class="arrow">
                    </span>
                </div>
            </div>
            <div class="price-sum">
                <span class="txt">
                    合计:
                </span>
                <strong class="price">
                    ¥
                    <em id="J_Total">
                        0.00
                    </em>
                </strong>
            </div>
            <div class="btn-area">
                <a href="javascript:void(0)" id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
                    <span>
                        结&nbsp;算
                    </span>
                </a>
            </div>
        </div>
    </div>
</div>
<script>
//$(document).ready(function(){})简写
    $(function(){
        //给结算绑定单击事件
        $('#J_Go').click(function(){
            
        // 获取 所选的购物车id
        var cartids = ComputerNumAndPrice()
        // 判断是否选择了商品
        if(!cartids.length){
            // 没有选择商品
            alert('请注意如果没有选择宝贝，将无法结算');
            return;
        }
        // 把数组转为json格式字符串,
        var res = JSON.stringify( cartids );
        location.href="{% url 'myhome_orderconfirm' %}?cartids="+res

        })




        $(".add").click(function(){
            var t=$(this).parent().find('input[class*=text_box]');
            t.val(parseInt(t.val())+1)
            changenum(t)
        })
        $(".min").click(function(){
            var t=$(this).parent().find('input[class*=text_box]');
            t.val(parseInt(t.val())-1)
            if(parseInt(t.val())<0){
                t.val(0);
            }
          changenum(t)
        })

    $('.cartnum').blur(function(){
        // 获取当前的value
        changenum($(this))

    })

   function changenum(t){
        var newnum = Number(t.val())
        var cartid = t.attr('cartid')
        // 判断newnum
        if(newnum < 1){
            return
        }
        $.get('{% url "myhome_cartedit" %}',{'cartid':cartid,'num':newnum},function(data){
            // alert(data.msg)
            // 修改当前购物车商品的 小计
            t.parents('ul').find('.J_ItemSum').text(data.totalprice)
            ComputerNumAndPrice()
        
        },'json')

   }


   // 给选框绑定单击事件
   $('.check[name!=select-all]').click(function(){
        ComputerNumAndPrice()
    })

    function ComputerNumAndPrice(){
        var TotalPrice = 0
        var TotalNum = 0
        var cartids = []
        // 获取页面中所以已经选中的元素
        $('.check[name!=select-all]').each(function(){
            var res = $(this).prop('checked')
            if(res){
                // 获取当前元素的 小计价格 和数量
                TotalPrice += Number($(this).parents('ul').find('.J_ItemSum').text())
                TotalNum += Number($(this).parents('ul').find('.cartnum').val())
                cartids.push($(this).val())
            }
        })

        $('#J_SelectedItemsCount').text(TotalNum)
        $('#J_Total').text(TotalPrice.toFixed(2))

        return cartids
    }


    $('#J_SelectAllCbx2').click(function(){
        //讲全选框的值传给其他选框
        $('.check').prop('checked',$(this).prop('checked'))
        ComputerNumAndPrice()
    })


    // 给删除按钮绑定单击事件
    $('.delete').click(function(){
        // 获取当前所选的分类id
        var cid = $(this).parents('ul').find('.cartnum').attr('cartid')
        var a = $(this)
        // 发送ajax请求
        $.get('{% url "myhome_cartdel" %}',{'cartid':cid},function(data){
            // 判断是否已经删除成功
            if(data['error'] == 0){

                a.parents('ul').remove()
            }
            alert(data['msg'])
        },'json')
    })

    $('.deleteAll').click(function(){
        
        if($('.check-all').prop('checked')){

            $('.cartnum').each(function(){
                var cartid = $(this).attr('cartid')
                $.get('{% url "myhome_cartdel" %}',{'cartid':cartid},function(data){

                    console.log(data)
                })
            })
                $('.check[name!=select-all]').each(function(){
                $(this).parents('div').parents('li').parents('ul').remove(); 
            })

        }
    })

})

</script>
{% endblock %}